<template>
  <div class="demo">
    <div class="demo-title">自定义预览</div>
    <div class="demo-content">
      <Upload
        v-model:file-list="fileList"
        list-type="picture"
        action="//jsonplaceholder.typicode.com/posts/"
        :preview-file="previewFile"
      >
        <Button><UploadOutlined />Upload</Button>
      </Upload>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Upload from '@sscd/upload';
  import type { UploadProps } from '@sscd/upload';
  const previewFile: UploadProps['previewFile'] = async (file) => {
    console.log('Your upload file:', file);
    // Your process logic. Here we just mock to the same file
    const res = await fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
      method: 'POST',
      body: file,
    });
    const { thumbnail } = await res.json();
    return thumbnail;
  };
  const fileList = ref([]);
</script>
